<!--
 * @Description:过滤菜单
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-16 17:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 17:30:01
-->
<template>
	<view class="filter-menu-container">
		<c-navigation-bar :bgColor="true" title="Filter"></c-navigation-bar>
		<view class="container-box">
			<view class="filter-menu-title">
				<text>FILTER BY</text>
			</view>
			<view class="filter-box">
				<ul>
					<li @click="$set(currentTypeId, 0, item)" v-for="(item, index) in typeList" :key="item.id" :class="`${currentTypeId[0] === item? 'is-checked' : ''}`">
						{{ item.name }}
					
					</li>
				</ul>
				<ul>
					<li
						@click="handleGoods(index,item)"
						:class="`${currentTypeId[1] === item.id ? 'is-checked' : ''}`"
						v-for="(item, index) in  currentTypeId[0].child"
					>
						{{ item.name }}
						<transition name="fade">
							<u-icon v-if="currentTypeId[1] === index" name="checkmark" color="#2934D0"></u-icon>
						</transition>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			typeList: [
			
				{
					lab: 'All',
					id: '0',
					child: []
				},
				{
					lab: 'Shoes',
					id: '1',
					child: [
						{
							lab: 'Jack & Jones',
							id: '0-1'
						},
						{
							lab: 'Pepe Jeans',
							id: '0-2'
						},
						{
							lab: 'Spykar',
							id: '0-3'
						},
						{
							lab: 'Wrogn',
							id: '0-4'
						},
						{
							lab: 'Allen Solly',
							id: '0-5'
						},
						{
							lab: 'Basics',
							id: '0-6'
						},
						{
							lab: 'Bossini',
							id: '0-7'
						},
						{
							lab: 'GAP',
							id: '0-8'
						},
						{
							lab: 'John Players',
							id: '0-9'
						},
						{
							lab: 'Mufti',
							id: '0-10'
						},
						{
							lab: 'Rodamo',
							id: '0-11'
						}
					]
				},
				{
					lab: 'Sports',
					id: '2',
					child: [
						{
							lab: '安踏',
							id: '2-1'
						},
						{
							lab: '李宁',
							id: '2-2'
						},
						{
							lab: 'nike',
							id: '2-3'
						},
						{
							lab: '特步',
							id: '2-4'
						}
					]
				},
				{
					lab: 'Food',
					id: '3',
					child: []
				}
			],
			currentTypeId: ['0', '']
		};
	},
	computed: {},
	
		onLoad() {
			this.getCategory();
		},
		methods: {		
			handleGoods(index,item){

				this.$set(this.currentTypeId, 1, index)
				uni.navigateTo({
					url: `/pages/goodsForClassify/goodsForClassify?id=${item.id}&name=${item.name}` 
				})
			},
			getCategory() {
				this.$u.get('/app/shopGoodsInfo/categoryAll').then((res) => {
					// console.log(d);
					this.typeList = res.data;
				});
			}
		
	}
};
</script>

<style lang="scss" scoped>
/deep/  .certificate-box {
	margin: 0 auto;
}

.filter-menu-container {
	.container-box {
		padding-left: 0;
		padding-right: 0;

		.filter-menu-title {
			line-height: 24rpx;
			font-size: 20rpx;
			color: 24rpx;
			padding: 0 0 30rpx 30rpx;
			border-bottom: 2rpx solid #f2f3f5;
		}

		.filter-box {
			display: flex;

			> ul:first-child {
				width: 340rpx;
				border-right: 2rpx solid #f2f3f5;

				> li {
				    padding: 34rpx 20rpx;
				    text-align: center;
				    color: #323755;
				    white-space: pre-wrap;
				    vertical-align: middle;
				    transition: 0.2s;
				    word-break: break-all;

					&.is-checked {
						background-color: rgb(41, 52, 208);
						    color: #fff;
					}
				}
			}

			> ul:nth-child(2) {
				flex: auto;
				width: 0;
				padding-left: 60rpx;

				> li {
					transition: 0.2s;
					line-height: 84rpx;
					display: flex;
					justify-content: space-between;
					padding-right: 70rpx;

					.u-icon {
						font-size: 40rpx;
					}

					.fade-enter-active,
					.fade-leave-active {
						transition: opacity 0.2s;
					}

					.fade-enter,
					.fade-leave-to {
						opacity: 0;
					}
					&.is-checked {
						color: #2934d0;
					}
				}
			}
		}
	}
}
</style>
